import * as React from 'react';
import styles from './styles/index.less';
import { CountCardObject, NetEffectObject, YwjObject } from '@/pages/routes/ddx/interface';
import { message } from 'antd';
import { getEffectedNetData, getYwjList } from '@/pages/routes/ddx/service';
import CountCard from '@/pages/routes/ddx/CountCard';
import ColumnWrap from './ColumnWrap';

export interface RiverReverseProps {}

interface RiverReverseState {
  loading: boolean;
  ywjList: YwjObject[];
  effectDataSource: NetEffectObject[];
  effectDataLoading: boolean;
}

class RiverReverse extends React.Component<RiverReverseProps, RiverReverseState> {
  public static propTypes = {};
  public static defaultProps = {};
  public state: RiverReverseState = {
    ywjList: [],
    effectDataSource: [],
    effectDataLoading: false,
    loading: false,
  };

  public async componentDidMount() {
    await this.loadData();
    await this.loadEffectData();
  }

  public render() {
    const { ywjList, effectDataSource } = this.state;
    return (
      <div className={styles.container}>
        <div className={styles.ywSection}>
          <div className={styles.sectionTitle}>液位计</div>
          <div className={styles.ywContainer}>
            {ywjList.map((v) => {
              return (
                <div key={v.id} className={styles.row}>
                  <div>{v.title}</div>
                  <div>{v.river}</div>
                  <div>
                    <span>当前液位：</span>
                    <span>{v.level}</span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <div className={styles.gwSections}>
          {effectDataSource.map((net) => {
            return (
              <div key={net.key}>
                <div className={styles.sectionTitle}>{net.title}</div>
                <div className={styles.gwSection}>
                  <ColumnWrap
                    data={net.data}
                    renderItem={(n: CountCardObject) => {
                      return (
                        <CountCard
                          style={{ backgroundColor: net.bgColor }}
                          className={styles.card}
                          key={n.title}
                          icon={n.icon}
                          title={n.title}
                          count={n.count}
                          total={n.total}
                          unit={n.unit}
                          type={n.type}
                          countStyle={{ color: net.activeColor }}
                          onClick={(obj)=>{
                            console.log(obj);
                          }}
                        />
                      );
                    }}
                  />
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }

  private async loadData() {
    this.setState({ loading: true });
    try {
      const { msg, data, code } = await getYwjList();
      if (code === -1) {
        this.setState({
          loading: false,
        });
        message.error(msg);
        return;
      }
      this.setState({
        loading: false,
        ywjList: data,
      });
    } catch (e) {
      console.error(e);
      message.error('获取液位计信息失败');
      this.setState({ loading: false });
    }
  }

  private async loadEffectData() {
    this.setState({ effectDataLoading: true });
    try {
      const { msg, data, code } = await getEffectedNetData();
      if (code === -1) {
        this.setState({
          effectDataLoading: false,
        });
        message.error(msg);
        return;
      }
      this.setState({
        effectDataLoading: false,
        effectDataSource: data,
      });
    } catch (e) {
      console.error(e);
      message.error('获取液位计信息失败');
      this.setState({ effectDataLoading: false });
    }
  }
};

export default RiverReverse;
